<template>
  <q-card square flat class="q-mt-lg q-pt-md q-pb-lg">
    <div class="q-pt-sm q-px-lg">
      <!-- {{ group }}----------------
      {{ tableOptions.columns }} -->
      <div class="top" v-if="topLeft && topTop">
        <!-- <q-item-label>状态：</q-item-label> -->
        <q-item-section>
          <q-select
            outlined
            dense
            emit-value
            v-model="searchInfo.search[isStatus]"
            map-options
            style="max-width: 218px"
            :options="topOptions"
          />
        </q-item-section>
      </div>
      <q-table
        table-style="max-height: 500px"
        flat
        square
        table-header-class="my-special-class"
        style="border-bottom: 1px solid lightgrey"
        :rows="tableOptions.columnDatas"
        :columns="tableOptions.columns"
        row-key="id"
        :loading="tableOptions.tableLoading"
        v-model:pagination="initialPagination"
        @request="onRequest"
        :visible-columns="group"
        :rows-per-page-options="[5, 10, 15, 20, 25, 50, 100]"
      >
        <template v-slot:top-left>
          <div class="topLeft" v-if="topLeft">
            <!-- <q-item-label class="text-body1">角色管理</q-item-label> -->
            <q-input
              clearable
              outlined
              dense
              placeholder="请输入关键字搜索"
              class="on-left"
              debounce="500"
              v-model="searchInfo.keywords"
              style="width: 220px"
            >
            </q-input>
            <el-config-provider :locale="zhCn">
              <el-date-picker
                v-model="searchInfo.dateMin.created_at"
                size="large"
                type="datetime"
                placeholder="最小时间"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :locale="zhCn"
              ></el-date-picker>
            </el-config-provider>
            &nbsp; - &nbsp;
            <el-config-provider :locale="zhCn">
              <el-date-picker
                v-model="searchInfo.dateMax.created_at"
                size="large"
                type="datetime"
                placeholder="最大时间"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :locale="zhCn"
              ></el-date-picker>
            </el-config-provider>
            <div class="searchBtn">
              <q-btn
                unelevated
                class="no-border-radius color-primary"
                color="primary"
                icon="search"
                label="查询"
                :loading="tableOptions.tableLoading"
                style="margin-left: 10px"
                @click="listSearch"
              />
              <q-btn
                unelevated
                class="no-border-radius color-primary"
                color="primary"
                label="重置"
                style="margin-left: 10px"
                @click="listClearn"
              />
            </div>
          </div>
        </template>
        <template v-slot:top-right="table">
          <div class="topRight">
            <q-btn
              color="primary"
              icon-right="archive"
              label="导出数据"
              no-caps
              @click="exportTable"
              style="margin-right: 10px"
            />
            <q-btn-dropdown
              outline
              color="primary"
              label="自选列"
              icon="view_list"
            >
              <q-list>
                <q-item
                  tag="label"
                  v-for="item in tableOptions.columns"
                  :key="item.name"
                >
                  <q-item-section avatar>
                    <q-checkbox v-model="group" :val="item.name" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>{{ item.label }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
            <q-btn
              rounded
              flat
              dense
              icon="add"
              @click="add"
              v-if="topAdd"
              v-permission="`${props.auth ? props.auth : route.path + ':add'}`"
            >
              <q-tooltip>新建</q-tooltip>
            </q-btn>
            <q-btn
              rounded
              flat
              round
              dense
              :icon="table.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
              @click="table.toggleFullscreen"
            >
              <q-tooltip>全屏</q-tooltip>
            </q-btn>
          </div>
        </template>
        <template v-slot:body="props">
          <slot name="yq_table_body" :props="props"></slot>
        </template>
      </q-table>
    </div>
  </q-card>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { sendWSPush } from '@/utils/socket/socket';

interface Props {
  search?: any;
  table?: any;
  initial?: any;
  topTop?: boolean;
  topLeft?: boolean;
  topAdd?: boolean;
  topOptions?: any;
  isStatus?: string;
  auth?: any; //权限字段，是否展示新建按钮
}
const group: any = ref([]);
const route = useRoute();
const selected = ref([]);

const onRequest = (props: any) => {
  console.log('页码变化');
  emit('onRequest', props);
};
const listSearch = () => {
  console.log('查询');
  emit('search');
};
const listClearn = () => {
  console.log('重置');
  searchInfo.value.keywords = '';
  searchInfo.value.search[props.isStatus] = '';
  searchInfo.value.dateMin = {
    created_at: '',
  };
  searchInfo.value.dateMax = {
    created_at: '',
  };
  //初始化页码
  initialPagination.value.page = 1;
  initialPagination.value.rowsPerPage = 15;
  initialPagination.value.per_page = 15;
  initialPagination.value.rowsNumber = 0;

  emit('search');
};
const add = () => {
  console.log('新建');
  emit('add');
};
const props = withDefaults(defineProps<Props>(), {
  search: {
    keywords: '',
    search: {
      status: '',
    },
    dateMin: {
      created_at: '',
    },
    dateMax: {
      created_at: '',
    },
  },
  topOptions: [
    { value: '', label: '全部状态' },
    { value: 1, label: '启动' },
    { value: 0, label: '关闭' },
  ],
  topLeft: true,
  topTop: true,
  topAdd: true,
  isStatus: 'status',
  auth: '',
});
const emit = defineEmits([
  'update:search',
  'update:table',
  'update:initial',
  'onRequest',
  'add',
  'search',
]);

//导出表格
const exportTable = () => {
  console.log('导出表格');
  sendWSPush({
    action: 'back/notify/push',
    body: {
      user_id: 16,
      type: 0,
      title: '表格text表格text',
      content: '内容',
      state: 0,
      is_top: 0,
    },
  });
};

const searchInfo: any = computed({
  set(value: any) {
    // emit('update:search', value);
  },
  get() {
    console.log('props.search', props.search);
    return props.search;
  },
});

const tableOptions: any = computed({
  set(value: any) {
    // console.log('set.table', value);
    // emit('update:table', value);
  },
  get() {
    console.log('props.table', props.table);
    return props.table;
  },
});

const initialPagination: any = computed({
  set(value: any) {
    // console.log('set.initial', value);
    // emit('update:initial', value);
  },
  get() {
    console.log('props.initial', props.initial);
    return props.initial;
  },
});

tableOptions.value.columns.forEach(({ name }) => {
  group.value.push(name);
});
onUnmounted(() => {
  // console.log('销毁');
  // emit('update:initial', {
  //   page: 1,
  //   rowsPerPage: 15,
  //   per_page: 15,
  //   rowsNumber: 0,
  // });
});
</script>
<style scoped lang="scss">
.top {
  // padding-left: 10px;
  margin-bottom: 10px;
}
.topLeft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // padding-left: 58px;
}
.topRight {
  padding-top: 10px;
}
::v-deep(.my-special-class) {
  height: 48px;
  background: #fafafa;
}
::v-deep(.my-special-class th) {
  font-size: 16px;
}
@media screen and (max-width: 780px) {
  ::v-deep(.q-table__separator) {
    display: none;
  }
  ::v-deep(.el-input--large) {
    margin-top: 8px;
  }
  .searchBtn {
    padding: 0;
    margin-top: 10px;
    margin-left: -10px;
  }
}
</style>
